<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画</title>
    <script src="../lib/jquery-3.4.1.js"></script>
    <style>

        div{

            width: 100px;
            height: 100px;
            background-color: orange;
            position: relative;
        }


    </style>


</head>
<body>

<h2>自定义动画</h2>

<button id="button1">点我动画1</button>

<button id="button2">点我动画2</button>


        <p style="color: red;margin-top: 10px">默认情况下,所有的HTML有一个静态的位置.如果我们想改变他需要将元素的position属性修改为relative/fixes或者absolute</p>



        <div id="div1">邢伟新</div>

        <div id="div2">邢伟新</div>





<script>


            $(document).ready(function () {
            $("#button1").click(function () {

            $("#div1").animate({left:"500px"},1000,function () {

                alert("动画完成");
            });

            $("#button2").click(function () {
                $("#div2").animate({

                    left:"500px",
                    opacity:"0.5",
                    height:"150px",
                    width:"150px"
                });
            });


        });
        
    });



</script>
</body>
</html>